import { HoxRoot } from "hox";
import { useEffect, useState } from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import router from "./routes";

function App() {
  const [landscape, sLandscape] = useState(false);

  const hengshuping = () => {
    if (window.orientation == 180 || window.orientation == 0) {
      sLandscape(false);
    }
    if (window.orientation == 90 || window.orientation == -90) {
      sLandscape(true);
    }
  };
  useEffect(() => {
    hengshuping();
    window.addEventListener(
      "onorientationchange" in window ? "orientationchange" : "resize",
      hengshuping,
      false
    );
  }, []);

  return landscape ? (
    <div className='fixed z-10 left-0 top-0 w-full h-full col-cc bg-[#2e2e2e] text-22 text-[#777]'>
      <img
        src=''
        alt=''
      />
      <div className='mt-8'>为了您的良好体验</div>
      <div>请将手机/平板竖屏操作</div>
    </div>
  ) : (
    <HoxRoot>
      <RouterProvider router={createBrowserRouter(router)} />
    </HoxRoot>
  );
}

export default App;
